<template>
	<view class="container">
		<uni-search-bar placeholder="请输入工单编号" cancelButton="none" radius="36"></uni-search-bar>
		
		<view v-if="reportList.length === 0" class="empty">
		<!-- <view class="empty"> -->
			<image src="/static/empty.png" mode="widthFix"></image>
			<text>暂无数据</text>
		</view>
		<view v-else class="reports">
		<!-- <view class="reports"> -->
			<uni-card v-for="(item, index) in 20" title="工单编号: 202506061234567890" extra="已办结">
				<view class="data-item">
					<text class="title">问题类型:</text>
					<text class="value">纠纷纠纷</text>
				</view>
				<view class="data-item">
					<text class="title">问题属地:</text>
					<text class="value">雁塔区</text>
				</view>
				<view class="data-item">
					<text class="title">举报时间:</text>
					<text class="value">2025-06-06 12:00:00</text>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	
	const reportList = ref([1, 2, 3])
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		max-height: 100vh;
		box-sizing: border-box;
		/* 兼容 iOS 设备 */
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iPhone X 及以上设备 */
		padding-bottom: env(safe-area-inset-bottom);
		background:
			linear-gradient(to bottom, transparent, #eef1f4 100%),
			linear-gradient(to bottom, rgba(21, 87, 176, 1) 40%, rgba(0, 212, 255, 1));
	}
	
	.reports,
	.empty {
		flex: 1;
		box-sizing: border-box;
		background-color: #fff;
		margin: 0 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		image {
			width: 50%;
		}
		
		text {
			display: inline-block;
			margin-top: 20rpx;
			color: #aaa;
		}
	}
	
	.reports {
		overflow-y: scroll;
	}
	
	.data-item {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		
		.value {
			padding-left: 16rpx;
		}
	}
	
	::v-deep {
		.uni-card {
			margin: 20rpx !important;
		}
	}
</style>